<template>
    <div v-loading="loading">
        <el-dialog :title="type == 'create' ? '添加角色' : '修改角色'" :visible.sync="visible" width="800px">
            <div class="flexSB">
                <el-form :model="form" style="width: 500px;">
                    <el-form-item label="名称">
                        <el-input placeholder="请输入名称" style="width:400px" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input placeholder="请输入描述" style="width:400px" v-model="form.desc"></el-input>
                    </el-form-item>
                </el-form>
                <div v-if="visible">
                    <el-tree :data="tableData" :default-checked-keys="menuList" :props="defaultProps" :check-strictly="true"
                        @check-change="getCurrentNodeFun" highlight-current node-key="id" ref="tree" show-checkbox
                        style="width: 300px;"></el-tree>
                </div>
            </div>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBox">取 消</el-button>
                <el-button @click="submit" type="primary">确 定</el-button>
            </div>
        </el-dialog>

        <el-button @click="toForm()" size="small" style="width: 150px;" type="success">添加</el-button>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="440px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="名称" prop="name"></el-table-column>
                <el-table-column label="描述" prop="desc"></el-table-column>
                <el-table-column label="添加时间" prop="created_at"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="toForm(scope.row)" size="mini" type="primary">修改</el-button>
                        <el-popconfirm @confirm="del(scope.row.id)" title="这是一段内容确定删除吗？">
                            <el-button size="mini" slot="reference" type="danger">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>
  
<script>
import initData from '@/mixins/index'
export default {
    mixins: [initData],
    data() {
        return {
            query: {},
            form: {
                name: '',
                desc: '',
                menu_id: [], //菜单ID
            },
            visible: false,
            tableData: [],
            worksId: '',
            menuList: [], //选中的ID
            defaultProps: {
                children: 'childrens',
                label: 'name',
            },
            type: 'create', //判断状态
        }
    },
    mounted() {
        this.beforeInit()
        this.getAdministratorsMenu()
    },
    methods: {
        beforeInit() {
            this.url = '/admin-role/index'
            this.init() //重新请求数据
        },
        getCurrentNodeFun(val, isSelect) {
            console.log("var==", val, "isSelect==", isSelect)

            if (isSelect) {
                this.form.menu_id.push(val.id)
            } else {
                let index = this.form.menu_id.indexOf(val.id) // 查找元素 '3' 的索引位置
                if (index != -1) {
                    this.form.menu_id.splice(index, 1) // 删除索引为 'index' 的元素
                }
            }
            console.log('menu_id', this.form.menu_id)
        },

        getAdministratorsMenu() {
            let that = this
            this.$request.get('/admin-menu/index').then((res) => {
                console.log('getAdministratorsInfo', res)
                that.tableData = res
            })
        },
        del(id) {
            this.$request.del('/admin-role/delete/' + id).then((res) => {
                this.$message.success('删除成功')
                this.init()
            })
        },

        closeBox() {
            this.type = 'create'
            this.visible = false
            this.form = {
                name: '',
                desc: '',
                menu_id: [],
            }

        },

        getAdministratorsInfo() {
            let that = this
            this.$request.get('/admin/index', this.query).then((res) => {
                console.log('res', res.items)
            })
        },

        toForm(form = null) {

            this.visible = true //打开弹出框
            if (form != null) {
                this.menuList.length = 0
                this.form.menu_id.length = 0
                this.init()
                this.type = 'update'
                this.worksId = form.id
                this.form.name = form.name
                this.form.desc = form.desc
                this.form.menu_id = form.menu //后端传回来的菜单id
                this.menuList = form.menu
                console.log("执行")
            } else {
                this.menuList = []
                this.menuList.length = 0
                console.log("this.menuList", this.menuList)
                this.form.menu_id.length = 0
                this.type = 'create'
                this.worksId = ''
                this.form = {
                    name: '',
                    desc: '',
                    menu_id: [],
                }
            }
        },

        submit() {
            if (!(this.form.name && this.form.desc)) {
                this.$message({
                    message: '请将信息填写完整！',
                    type: 'warning',
                })
                return
            }

            if (this.type == 'create') {
                this.$request.post('/admin-role/create', this.form).then((res) => {
                    this.$message({
                        message: '添加成功',
                        type: 'success',
                    })
                    this.init()
                    this.closeBox()
                })
            } else {
                this.$request.put('/admin-role/update/' + this.worksId, this.form).then((res) => {
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                    })
                    this.init()
                    this.closeBox()
                })
            }
        },
    },
}
</script>
  
<style lang="scss" scoped>
.flexSB {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}</style>